<template>
    <view :style="{ '--color': color }">
        <status-bar :title="title"></status-bar>

        <view class="Wrapper padding24">
            <view class="row j-sb a-center">
                <text class="size30 color_99">订单信息</text>
                <text class="color size28">{{ stateTxt }}</text>
            </view>
            <view class="list">
                <view class="title">订单编号：</view>
                <text class="content">{{ pageData.order_code }}</text>
            </view>
            <view class="list">
                <view class="title">下单时间：</view>
                <text class="content">{{ pageData.pay_time }}</text>
            </view>
            <view class="list">
                <view class="title">配送方式：</view>
                <text class="content">{{ Delivery }}</text>
            </view>
            <view class="list">
                <view class="title">订单状态：</view>
                <text class="content">{{ stateTxt }}</text>
            </view>
        </view>

        <view class="Wrapper padding24">
            <view class="row j-sb a-center">
                <text class="size30 color_99">收货人信息</text>
            </view>
            <view class="list">
                <view class="title">姓名：</view>
                <text class="content">{{ pageData.uname }}</text>
            </view>
            <view class="list">
                <view class="title">电话：</view>
                <text class="content">{{ pageData.utel }}</text>
            </view>
            <view class="list">
                <view class="title">地址：</view>
                <text class="content">{{ pageData.address }}</text>
            </view>
            <view class="list">
                <view class="title">备注：</view>
                <text class="content">{{ pageData.remarks }}</text>
            </view>
        </view>

        <view class="commodityBox">
            <view class="row j-sb a-center p-left24 p-top24">
                <text class="size30 color_99">商品信息</text>
            </view>
            <view class="commodity" v-for="(item, index) in pageData.goodsData" :key="index">
                <image :src="$imgUrls(item.goods_img)" mode="aspectFill" class="goods_img" v-if="item.goods_img"></image>
                <view class="content">
                    <text class="black size28 ellipsis">{{ item.goods_name }}</text>
                    <text class="color_33 size26 ellipsis">{{ item.specs_bind_text }}</text>
                    <view class="info">
                        <view class="Price color_ff4">
                            <text class="h6">￥</text>
                            <text class="size32">{{ item.price }}</text>
                        </view>
                        <text class="color_99 size26">x{{ item.goods_num }} {{ item.unit }}</text>
                    </view>
                </view>
            </view>

            <view class="footer">
                <text class="black size30">应付金额</text>
                <view class="Price color_ff4">
                    <text class="h6">￥</text>
                    <text class="size32">{{ pageData.total }}</text>
                </view>
            </view>
        </view>

        <view class="Wrapper">
            <view class="padding24">
                <view class="listInfo">
                    <view class="title">运费：</view>
                    <text class="content">￥{{ pageData.express_fee }}</text>
                </view>
                <view class="listInfo" v-if="pageData.vip_money > 0">
                    <view class="d-flex f-column">
                        <text class="title">会员折扣：</text>
                        <text class="color_99 h6">{{ pageData.vip_title }}</text>
                    </view>
                    <view class="Price color_ff4">
                        <text class="size30">-</text>
                        <text class="h6">￥</text>
                        <text class="size32">{{ pageData.vip_money }}</text>
                    </view>
                </view>
                <view class="listInfo" v-if="pageData.act_money > 0">
                    <view class="d-flex f-column">
                        <text class="title">活动：</text>
                        <text class="color_99 h6">{{ pageData.act_title }}</text>
                    </view>
                    <view class="Price color_ff4">
                        <text class="h6">-￥</text>
                        <text class="size32">{{ pageData.act_money }}</text>
                    </view>
                </view>
                <view class="listInfo" v-if="pageData.dis_money > 0">
                    <view class="d-flex f-column">
                        <text class="title">优惠劵：</text>
                        <text class="color_99 h6">{{ pageData.act_title }}</text>
                    </view>
                    <view class="Price color_ff4">
                        <text class="size30">-</text>
                        <text class="h6">￥</text>
                        <text class="size32">{{ pageData.dis_money }}</text>
                    </view>
                </view>
                <view class="listInfo" v-if="pageData.fen_to_money > 0">
                    <view class="d-flex f-column">
                        <text class="title">积分兑换：</text>
                        <text class="color_99 h6">使用{{ pageData.used_fen }}积分</text>
                    </view>
                    <view class="Price color_ff4">
                        <text class="size30">-</text>
                        <text class="h6">￥</text>
                        <text class="size32">{{ pageData.fen_to_money }}</text>
                    </view>
                </view>
            </view>
            <view class="footer">
                <text class="black size30">实付金额</text>
                <text class="color_ff4 size30" v-if="pageData.used_balance > 0">￥{{ pageData.used_balance }}</text>
                <text class="color_ff4 size30" v-else>￥{{ pageData.payment }}</text>
            </view>
        </view>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        data() {
            return {
                title: '订单详情',
                order_id: '',
                pageData: '',
                orderCount: []
            };
        },
        onLoad(opt) {
            if (opt.order_id) this.order_id = opt.order_id;
            if (opt.orderCount) this.orderCount = JSON.parse(opt.orderCount);
            this.orderDetail();
        },
        methods: {
            orderDetail() {
                this.$http
                    .get({
                        url: '/BntApi/orderDetail',
                        data: {
                            order_id: this.order_id
                        }
                    })
                    .then((res) => {
                        if (res.errcode != 100) return;
                        const result = res.data;
                        this.pageData = result;
                    });
            }
        },
        computed: {
            ...mapState(['color']),
            stateTxt() {
                if (!this.orderCount.length || !this.pageData) return;
                const orderState = this.orderCount.find((n) => n.state == this.pageData.state);
                return orderState.name;
            },
            Delivery() {
                if (!this.pageData) return;
                return this.pageData.delivery == 2 ? '自提' : '快递';
            }
        }
    };
</script>

<style lang="scss">
    page {
        background-color: $page;
        padding-bottom: 24rpx;
    }
</style>
<style lang="scss" scoped>
    .Wrapper {
        width: 700rpx;
        margin: 24rpx auto 0;
        background-color: #fff;
        border-radius: 10rpx;
        display: flex;
        flex-direction: column;
        .list {
            width: 100%;
            display: flex;
            margin-top: 20rpx;
            .title {
                min-width: 120rpx;
                color: #000;
                font-size: 28rpx;
                margin-right: 20rpx;
            }
            .content {
                flex: 1;
                color: #333;
                font-size: 28rpx;
            }
        }
        .listInfo {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20rpx;
            .title {
                min-width: 120rpx;
                color: #000;
                font-size: 28rpx;
                margin-right: 20rpx;
            }
            .content {
                color: #333;
                font-size: 28rpx;
            }
        }
        .listInfo:last-child {
            margin-bottom: 0;
        }
        .footer {
            width: 100%;
            padding: 20rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-top: 1px solid #f1f1f1;
            .myPrice {
                color: #ff4b4e;
                font-size: 30rpx;
            }
            .price-mini {
                color: #ff4b4e;
                font-size: 22rpx;
                align-self: flex-end;
            }
        }
    }
    .commodityBox {
        width: 700rpx;
        margin: 24rpx auto 0;
        background-color: #fff;
        border-radius: 10rpx;
        display: flex;
        flex-direction: column;
        .commodity {
            width: 100%;
            display: flex;
            align-items: center;
            padding: 24rpx;
            border-bottom: 1px solid #f1f1f1;
            .goods_img {
                width: 130rpx;
                height: 130rpx;
                border-radius: 10rpx;
                margin-right: 20rpx;
            }
            .content {
                flex: 1;
                height: 130rpx;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .info {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    .Price {
                        display: flex;
                        align-items: center;
                        margin-right: 30rpx;
                    }
                }
            }
        }
        .footer {
            width: 100%;
            padding: 20rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    }
</style>
